
<!-- 
    新页面的分页 与page.vue 有些不同
 -->
<template>
	<div class="allGamePage"  v-if="noPage">
            <div id="page">
                <ul class="pagination">
                    <li v-show="current != 1" @click="current-- && goto(current--)" ><a class="next">上一页</a></li>
                    <li v-for="index in pages" @click="goto(index)" :key="index">
                      <a :class="{'active':current == index}"   >{{index}}</a>
                    </li>
                    <li  v-show="allpage != current && allpage != 0" @click="current++ && goto(current++)"><a class="next" >下一页</a></li>
                    <span class="allPage">共{{pages.length}}页</span>
                    <span class="jump">到第</span><input class="pageNum" @keyup.enter="goto(gotoInput)" v-model="gotoInput"  /> <label>页</label> <input type="button"  @click="goto(gotoInput)" class="btnPage" value="确定"/>
                </ul>
            </div>
    </div>
</template>
<script>
	import axios from 'axios';

	export default{
		components:{

		},
		data(){
			return {
				//分页
                current: 1,
                showItem: 5,
                flag: true,
                allpage: 2,// 总页数
                noPage:true,
                gotoInput: 1,
                allGiftList:[]
			}
		},
		computed: {
	        pages: {
	            get: function() {
	                var pag = [];
	                if (this.current < this.showItem) { //如果当前的激活的项 小于要显示的条数
	                    //总页数和要显示的条数那个大就显示多少条
	                    var i = Math.min(this.showItem, this.allpage);
	                    while (i) {
	                        pag.unshift(i--);
	                    }
	                } else { //当前页数大于显示页数了
	                    var middle = this.current - Math.floor(this.showItem / 2), //从哪里开始
	                        i = this.showItem;
	                    if (middle > (this.allpage - this.showItem)) {
	                        middle = (this.allpage - this.showItem) + 1
	                    }
	                    while (i--) {
	                        pag.push(middle++);
	                    }
	                }

	                return pag
	            },
	            set: function(newValue) { //如果不写计算属性的set，vue会报错


	            }
	        }
	    },
        mounted(){
            this.ajaxList(1) // 初始化数据
        },

		methods:{
			//分页
        goto: function(index) {
            console.log(index)
             console.log(this.current)
           
            
            if (index == this.current) {// 点击当前页

                return false
            }


            if (/^[0-9]*$/.test(index) && index <= this.allpage) {
                //$(window).scrollTop(0)
                this.current = index;
                this.ajaxList(this.current)

            } else {
                this.$toast.center("请输入正确的数字")
                this.gotoInput = 1;
            }
        },


        ajaxList:function(index){
            console.log(index)
        	let url = `/gift/api/giftbag/queryGiftBagData.do?page=${index}&pageSize=12`
            let that=this;
            axios.get(url).then(function(res){
                if(res.data.code==0 || JSON.stringify(res.data.showBags)!='[]'){// 读取data
                    console.log(res.data.showBags)
                    that.allGiftList = res.data.showBags
                    
                }else{
                    that.$toast.center("请求错误")
                }

               if(JSON.stringify(that.allGiftList)!='[]' && that.current>=that.allpage){ // 如果 总页数大于初始化的页数，就改变初始化的页数
                            that.allpage=that.current+1

               }

                that.$emit("getAllGift",that.allGiftList)

            },function(err){


            })
        },
       
		}
	}

</script>
<style scoped lang="less">
@import "../common/base.less";
	.allGamePage {
            width:12rem;
            .px2rem(height,40);
            margin: 0 auto;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 1.5rem;
            #page {
                width: 100%;
                .px2rem(height,
                40);
                margin: 0 auto;
                position: relative;
                .pagination{
                    width: auto;
                    position: absolute;
                    left: 40%;
                    transform: translateX(-30%);
                 li {
                    .px2rem(width,
                    40); 
                    .px2rem(height,
                    40);

                    a {
                        .px2rem(width,
                        40);
                        .px2rem(height,
                        40);
                        .px2rem(line-height,
                        40);
                        .px2rem(font-size,
                        12);
                        .px2rem(margin-left,
                        7);
                        text-align: center;
                        padding: 0;
                        color: #7D8993;
                        .px2rem(border-radius,5);
                        background:rgba(212, 216, 220, 1);
                        border: none;
                        float: left;

                    }
                    .active {
                        background: #B12D44 !important;
                        color:#fff;
                    }

                    .next {
                        .px2rem(height,
                        40);
                        .px2rem(width,
                        65);
                        .px2rem(border-radius,5);
                    }
                }
            }
                .allPage {
                    display: block;
                    float: left;
                        .px2rem(border-radius,5);
                    
                    .px2rem(margin-left,
                    10);
                    .px2rem(width,50);
                    .px2rem(height,20);
                    .px2rem(line-height,20);
                    .px2rem(margin-top,10);
                    overflow: hidden;

                    .px2rem(font-size,12);
                    color: #7D8993;
                    text-align: center;
                }


                    .jump{
                        display: block; 
                        float: left;
                        .px2rem(height,20);
                        .px2rem(line-height,20);
                        .px2rem(margin-right,10);
                        .px2rem(margin-left,10);
                        .px2rem(font-size,12);
                        position: relative;
                        .px2rem(top,10);
                        color: #7D8993;
                       
                        overflow: hidden;
                    }
                    label {
                        display: block;
                        float: left;
                       color: #7D8993;
                        .px2rem(margin-right,
                        8);
                        .px2rem(font-size,12);
                        .px2rem(height,20);
                        .px2rem(line-height,20);
                        .px2rem(margin-top,10);
                    }
                    .pageNum {
                        display: block;float: left;
                        .px2rem(width,
                        40);
                        .px2rem(height,
                        40);
                        .px2rem(line-height,
                        40);
                        .px2rem(font-size,12);
                        text-align: center;
                        .px2rem(border-radius,5);
                         background: #D4D8DC;
                        .px2rem(margin-right,
                        10);
                        padding: 0;
                        border: none;
                        color: #7D8993;
                    }
                    
                    .btnPage {
                      
                        border: none;
                        display: block;
                        float:right;
                        .px2rem(height,
                        40);
                        .px2rem(line-height,
                        40);
                        background: #D4D8DC;
                        .px2rem(font-size,12);
                        .px2rem(border-radius,5);
                        text-align: center;
                        color: #7D8993;

                    }
                
            }
        }
</style>